<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/jquery.js"></script>
    <style>
        #app {
            overflow: auto;
        }
        .div1:hover{
            cursor: pointer;
        }
        #app a{
            text-decoration: none;
            display: inline-block;
            width: 100%;
            height: 100%;
            color: gray;
        }
        #app a:hover{
            color: rgb(102, 177, 255);
        }
        .btn1 button{
            color: black;
            width: 100%;
            height: 100%;
            display: inline-block;
        }
        .btn1 button:hover{
            color: rgb(102, 177, 255);
        }
    </style>
</head>

<body>
    <div id="app">
        <el-header style="background-color: rgb(32, 160, 255); height: 60px;">
            <div style="float: left; font-size: 22px; color: white; line-height: 60px">
                erp管理平台
            </div>
            <div style="float: right; font-size: 14px; color: white; line-height: 60px">
                <i class="el-icon-user-solid"></i>
                <el-dropdown class="div1" @command="handleCommand">
                    <span style="color: white">
                        {{user.realname}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item command="a">系统消息</el-dropdown-item>
                        <el-dropdown-item command="b">个人主页</el-dropdown-item>
                        <el-dropdown-item class="btn1" command="exit">
                            <el-button type="text" @click="open">退出</el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container style="height: 890px; border: 1px solid #eee">
            <el-aside width="220px" style="background-color: rgb(236, 236, 236)">
                <el-menu :default-openeds="['1']" style="background-color: rgb(236, 236, 236)">
                    <el-submenu :index="fun.id"  v-for="fun in functions">
                        <template slot="title"><i :class="fun.icon"></i>{{fun.name}}</template>
                        <el-menu-item-group v-for="sub in fun.subFunctions">
                            <el-menu-item class="item1" :index="sub.id">
                                <a :href="sub.url" target="content">{{sub.name}}</a>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe width="100%" height="95%" style="border: none" name="content">

                </iframe>
            </el-main>
        </el-container>
    </div>
</body>
<script>
    let vue = new Vue({
        el: "#app",
        data() {
            return {
                user: {},
                functions:{},
            }
        },
        methods: {
            loadUser() {
                axios.get("/user")
                    .then(res => {
                        this.user = res.data;
                    })
            },
            loadFunctions() {
                axios.get("/functions/username")
                    .then(res => {
                        this.functions = res.data;
                    })
            },
            //用户操作
            handleCommand(command) {

            },
            open() {
                this.$confirm('是否退出', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '注销成功!'
                    // });
                    axios.post("/logout")
                        .then(res => {
                            if(res.data.msg == "注销成功"){
                                location.href = "login.html";
                            }else {
                                return;
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出',
                    });
                });
            }
        },
        mounted() {
            this.loadUser();
            this.loadFunctions();
        }
    });
</script>

</html>